<template>
	<div class="video-preview-container">
		<div class="video-wrapper">
			<img class="video-preview-close" :src="closeUrl" alt="" @click="close"  />
			<video class="video-preview-video" id="zco-im-preview-video" controls controlsList="nodownload noremoteplayback" disablePictureInPicture>
				<source :src="videoUrl" type="video/mp4">
			</video>
		</div>
	</div>
</template>

<script>

export default {
	components: {},
	props: {
		videoUrl: {
			type: String,
			require: true,
			default: ''
		}
	},
	data() {
		return {
			closeUrl: require('../../assets/img/close.png')
		};
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {
		// 获取video元素
		const video = document.getElementById("zco-im-preview-video");
		// 播放视频
		video.play();
	},
	beforeDestroy() {
	},
	methods: {
		close() {
			// 获取video元素
			const video = document.getElementById("zco-im-preview-video");
			// 播放视频
			video.pause();
			this.$emit('close');
		},
		
	}
};
</script>

<style scoped>
/* 公共样式 */
.video-preview-container {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #000000a8;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
}
.video-wrapper {
	width: 635px;
	height: 363px;
	position: absolute;
	/* position: absolute;
	top: calc(100% - 181px);
	left: calc(100% - 317px); */
}
.video-preview-video {
	width: 100%;
	height: 100%;
}
.video-preview-close {
	width: 26px;
	height: 26px;
	position: absolute;
	top: 10px;
	right: 15px;
	cursor: pointer;
	z-index: 1;
}

</style>
